<template>
    <div class="banner-p">
         <div class="banner-list" id="bannerCon">
            <img class="banner-img" src="@/assets/img/banner01.jpg" alt="" srcset="">
            <img class="banner-img" src="@/assets/img/banner02.jpg" alt="" srcset="">
            <img class="banner-img" src="@/assets/img/banner03.jpg" alt="" srcset="">
        </div>
    </div>
  
</template>
<script>
import Swiper from '@/util/Swiper'
export default {
    mounted () {
        var a = new Swiper({id: 'bannerCon'})
    }
}
</script>
<style >
.banner-p{overflow: hidden;position: relative;width: 100%;height: 334px;}
.banner-list{height: 100%;
    width: 100%;
       white-space:nowrap;
       font-size: 0;
       position: relative;
    }
.banner-img{height: 100%;width: 100%;object-fit: cover;}
.banner-indicator {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    background: 0 0;
}

.banner-indicator-item {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 1px 7px;
    cursor: pointer;
    border-radius: 6px;
    background: #aaa;
}

.banner-show-bgcolor {
    background: #fff;
}

</style>
